<template>
  <el-drawer
    title="选择辅导员"
    :visible.sync="drawer"
    :direction="'btt'"
    :modal="false"
    class="selectUserContent"
    size="650"
    :before-close="handleClose"
  >
    <el-row style="margin: 0" :gutter="20">
      <!--部门数据-->
      <!-- <el-col :span="4" class="treeBox" :xs="24">
        <TreeIndex :deptOptions="deptOptions" @handleNode="handleNodeClick" :title="'部门信息'"></TreeIndex>
      </el-col> -->
      <el-col :xs="24">
        <el-tabs v-model="activeName">
          <el-form
            :model="queryParams"
            label-width="90px"
            ref="queryForm"
            :inline="true"
          >
            <el-form-item label="院系">
              <el-select
                v-model="queryParams.deptId"
                clearable
                placeholder="请选择"
                @change="handSpeciality"
              >
                <el-option
                  v-for="dict in deptOptions"
                  :key="dict.id"
                  :label="dict.label"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="专业">
              <el-select
                v-model="queryParams.specialtyId"
                clearable
                placeholder="请选择"
                @change="changeGrade"
              >
                <el-option
                  v-for="dict in specialityList"
                  :key="dict.VALUE"
                  :label="dict.TITILE"
                  :value="dict.VALUE"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item prop="gradeId" label="年级">
              <el-select
                v-model="queryParams.gradeId"
                placeholder="请选择"
                @change="changeGrade"
                clearable
                class="elSelect"
              >
                <el-option
                  v-for="item in gradeDate"
                  :key="item.VALUE"
                  :label="item.TITILE"
                  :value="item.VALUE"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="班级">
              <el-select
                v-model="queryParams.id"
                clearable
                placeholder="请选择"
                class="elSelect"
              >
                <el-option
                  v-for="dict in classListType"
                  :key="dict.VALUE"
                  :label="dict.TITLE"
                  :value="dict.VALUE"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="onSearch"
                  size="mini"
                  >搜索</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetQuery"
                  >重置</el-button
                >
              </div>
            </el-form-item>
          </el-form>
          <el-tab-pane label="班级列表" name="allList">
            <el-table
              :data="allTableData"
              ref="multipleTable"
              @select="rowSelect"
              @select-all="selectAll"
              style="width: 100%"
              height="440"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column
                v-for="item in tableColumn"
                :key="item.prop"
                :prop="item.prop"
                :label="item.label"
                :show-overflow-tooltip="true"
                :align="'center'"
              >
                <!-- <template v-if="item.prop=='sex'" slot-scope="scope">
                                    <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"></dict-tag>
                                </template>
                                <template v-if="item.prop=='studentType'" slot-scope="scope">
                                    <dict-tag :options="dict.type.bc_student_type" :value="scope.row.studentType"></dict-tag>
                </template>-->
              </el-table-column>
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-tab-pane>
          <el-tab-pane label="已选择" name="haveList">
            <span slot="label">
              <el-badge
                :value="haveTableData.length"
                class="badgeItem"
                :hidden="!haveTableData.length"
                :type="'primary'"
                >已选择</el-badge
              >
            </span>

            <!-- <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              @click="handleDelete"
              v-hasPermi="['clr:counsellor:class:remove']" style="margin-bottom: 5px;"
              >删除所带班级</el-button
            > -->
            <el-table :data="haveTableData" style="width: 100%"  height="440">
              <!-- <el-table-column type="selection" width="55" align="center" /> -->
              <el-table-column
                v-for="item in tableColumn"
                :key="item.prop"
                :prop="item.prop"
                :label="item.label"
                :show-overflow-tooltip="true"
                :align="'center'"
              ></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script>
import TreeIndex from "@/components/tree/index.vue";
import { deptTreeSelect } from "@/api/system/user";
import { ubdClass } from "@/api/information/classInfor";
import { studentList } from "@/api/information/studentInfor";
import { getSpecialityByDeptId } from "@/api/information/unitMajor";
import { getGradeSelect } from "@/api/information/gradeInfor";
import { getClassSelect } from "@/api/information/classInfor";
import { classRemove,counsellorInforTid } from "@/api/counselor/index";

export default {
  name: "selectUser",
  components: {
    TreeIndex,
  },
  props: {
    sendUserIds: {
      type: Array,
      default: [],
    },
    deptId: {
      type: String,
      default: null,
    },
    cId: {
      type: String,
      default: null,
    },
    tId: {
      type: String,
      default: null,
    },
  },
  watch: {
    sendUserIds: {
      handler(newVal, oldVal) {
        // newVal是获取的是新的值
        console.log("new", newVal);
        this.haveTableData = newVal.map((item) => {
          return {
            name: item["className"],
            ...item,
          };
        });
        console.log(this.haveTableData, " this.haveTableData.sds");
      },
    },
    deptId: {
      handler(newVal, oldVal) {
        // newVal是获取的是新的值
        console.log("new", newVal);
        this.queryParams.deptId = newVal;
      },
    },
    cId: {
      handler(newVal, oldVal) {
        // newVal是获取的是新的值
        console.log("new", newVal);
        this.cId = newVal;
      },
    },
    tId: {
      handler(newVal, oldVal) {
        // newVal是获取的是新的值
        console.log("new", newVal);
        this.tId = newVal;
      },
    },
  },
  data() {
    return {
      drawer: false,
      deptOptions: [],
      activeName: "allList",
      studentColumn: [
        {
          prop: "deptNames",
          label: "所属院系",
        },
        {
          prop: "specialtyName",
          label: "专业",
        },
        {
          prop: "gradeName",
          label: "入学年级",
        },
        {
          prop: "classCode",
          label: "班号",
        },
        {
          prop: "name",
          label: "班级名称",
        },
        {
          prop: "classSize",
          label: "班级人数",
        },
      ],
      tableColumn: [],
      allTableData: [],
      haveTableData: [],
      classListType: [],
      specialityList: [],
      gradeDate: [],
      classIds: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: "",
      },
      total: 0,
    };
  },
  created() {
    this.department();
  },
  // mounted() {
  //   this.haveTableData = this.sendUserIds
  //   console.log(this.sendUserIds, 'sendUserIds')
  // },
  methods: {
    async handSpeciality() {
      this.queryParams.specialityId = "";
      this.queryParams.classId = "";
      this.classListType = [];
      this.getSpeciality();
      this.getGradeInfor();
    },
    getClassList() {
      getClassSelect({
        gradeId: this.queryParams.gradeId,
        specialtyId: this.queryParams.specialtyId,
      }).then((res) => {
        console.log(res, "班级");
        this.classListType = res.data;
      });
    },
    // 专业
    async getSpeciality() {
      if (this.queryParams.deptId) {
        await getSpecialityByDeptId({ deptId: this.queryParams.deptId }).then(
          (res) => {
            if (res.code == "200") {
              this.specialityList = res.data;
            } else {
              this.specialityList = [];
            }
          }
        );
      } else {
        this.specialityList = [];
      }
      console.log(this.specialityList);
    },
     // 多选框选中数据
     handleSelectionChange(selection) {
      
      this.classIds = selection.map(item => item.classId);
      console.log(selection,this.classIds,'学则班级')
 
    },
    handleDelete(){
      classRemove(this.cId,{classIds:this.classIds.join(',')}).then(res =>{
       if(res.code == 200){
        this.$modal.msgSuccess("删除成功");
        counsellorInforTid(this.tId).then(require => {
          console.log(require,'删除成功')
          this.sendUserIds = require.data.classList;
        })
       }
      })
    },
    // 年级
    getGradeInfor() {
      getGradeSelect().then((response) => {
        this.gradeDate = response.data;
      });
    },
    changeGrade(value) {
      console.log(value, "ceeee");
      if (value != undefined) {
        if (this.queryParams.specialtyId && this.queryParams.gradeId) {
          this.getClassList();
          this.classListType = [];
          this.queryParams.classId = "";
        } else {
          if (!value) {
            this.classListType = [];
            this.queryParams.classId = "";
          }
        }
      }
    },
    open() {
      this.drawer = true;
      this.tableColumn = this.studentColumn;

      this.getList();
      // this.rowSelect()
    },
    // formatter(row) {
    //     return row.sex === "0" ? '男': '女'
    // },
    initData() {
      this.activeName = "allList";
      this.tableColumn = [];
      this.allTableData = [];
      this.haveTableData = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        deptId: "",
      };
      this.total = 0;
    },
    handleClose(done) {
      const userIds = this.haveTableData.map((item) => {
        return item;
      });
      this.$emit("update:sendUserIds", userIds);
      done();
    },
    // 获取搜索表单提交的数据
    onSearch() {
      // 查询条件和分页数据合并
      this.getList();
    },
    // 重置
    resetQuery() {
      this.queryParams = {};
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.classListType = [];
      this.gradeDate = [];
      this.specialityList = [];
      this.onSearch();
    },
    rowSelect(selection, row) {
      console.log(selection, row, "123");

      // this.haveTableData = selection
      if (selection.length) {
        if (
          !this.haveTableData.some((item) => {
            return item.classCode == row.classCode;
          })
        ) {
          this.haveTableData.push(row);
        } else {
          this.haveTableData = this.haveTableData.filter((item) => {
            return row.classCode != item.classCode;
          });
        }
      } else {
        this.haveTableData = this.haveTableData.filter((item) => {
          return row.classCode != item.classCode;
        });
      }
    },
    selectAll(selection) {
      if (selection.length) {
        // selection.forEach((data) => {
        //   this.haveTableData.push(data);
        // });haveTableData
        const newSelected = selection.filter(
          (item) =>
            !this.haveTableData.some((oldItem) => oldItem.classCode === item.classCode)
        );
        this.haveTableData = [...this.haveTableData, ...newSelected];
        // console.log(selection, this.haveTableData,"1");
        // const uniqueArray = this.haveTableData.filter((item, index, self) => {
        //   return self.findIndex((t) => t.id === item.id) === index;
        // });
        // this.haveTableData = uniqueArray
        // selection.forEach(row => {
        //   this.rowSelect([row], row);
        // });
      } else {
        this.haveTableData = this.haveTableData.filter((item) => {
          return !this.allTableData.some((row) => {
            return row.classCode == item.classCode;
          });
        });
      }
    },
    // 获取班级列表
    getTeacherList() {
      ubdClass(this.queryParams).then((response) => {
        this.allTableData = response.rows;
        this.total = response.total;
        this.toggleSelection(response.rows);
      });
    },
    getStudentList() {
      studentList(this.queryParams).then((response) => {
        this.allTableData = response.rows;
        this.total = response.total;
        this.toggleSelection(response.rows);
      });
    },
    getList() {
      this.getTeacherList();
    },
    toggleSelection(rows) {
      console.log(rows, "dfsf");
      this.$nextTick(() => {
        if (rows) {
          rows.forEach((row) => {
            if (
              this.haveTableData.some((haveRow) => {
                return row.classCode === haveRow.classCode;
              })
            ) {
              this.$refs.multipleTable.toggleRowSelection(row);
            }
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      });
    },
    // 获取部门信息
    department() {
      deptTreeSelect().then((res) => {
        this.deptOptions = res.data;
      });
    },
    // tree树形选中的值
    // handleNodeClick(data) {
    //   console.log(data, "选中的值");
    //   this.queryParams.deptId = data.id;
    //   this.getList();
    // }
  },
};
</script>

<style lang="scss" scoped>
.treeBox {
  height: 550px;
}
.selectUserContent {
  ::v-deep .el-drawer__header {
    margin-bottom: 5px;
  }
  ::v-deep .el-badge__content.is-fixed {
    position: absolute;
    top: 15px;
    right: 3px;
  }
}
::v-deep .pagination-container {
  height: 33px;
}
</style>